<template>
    <Layout>
        <Item label="姓名" :value="info.studentName"></Item>
        <Item label="班级" :value="info.className"></Item>
        <Item
            label="请假类型"
            value="留宿申请"
            v-show="info.leaveType === 4"
        ></Item>
        <Item
            label="请假状态"
            :value="'待家长审核'"
            v-if="info.state === 1"
        ></Item>
        <Item label="请假状态" :value="'待家长审核'" v-else></Item>
        <Item label="请假理由" :value="info.reason"></Item>
        <Item
            label="留宿时间"
            :value="`${info.startWeekName}---${info.endWeekName}`"
        ></Item>
        <Item label="家长签署意见">
            <input
                type="text"
                placeholder="不通过请填写理由"
                v-model="comment"
            />
        </Item>
        <div class="btns">
            <button @click="onSub(false)"><span>不通过</span></button>
            <button @click="onSub(true)"><span>通过</span></button>
        </div>
    </Layout>
</template>

<script setup>
import Layout from './components/layout.vue';
import Item from './components/item.vue';
import { reqStayDetail, reqPutSave } from '@/api/parent';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const info = ref({});
const comment = ref('');

const getInfo = async () => {
    try {
        const res = await reqStayDetail(route.params.id);
        if (res.status === '200') {
            info.value = res.data;
        }
    } catch (error) {}
};

onMounted(() => {
    getInfo();
});

const onSub = async isNo => {
    if (isNo) {
        try {
            const res = await reqPutSave({
                comment: '同意',
                id: route.params.id,
                state: 4
            });
            if (res.status === '200') {
                ElMessage({
                    message: '您已通过',
                    type: 'success'
                });
                router.push({ name: 'home-parent' });
            }
        } catch (error) {}
    } else {
        try {
            const res = await reqPutSave({
                comment: comment.value,
                id: route.params.id,
                state: 3
            });
            if (res.status === '200') {
                ElMessage({
                    message: '您已拒绝通过',
                    type: 'error'
                });
                router.push({ name: 'home-parent' });
            }
        } catch (error) {}
    }
};
</script>

<style scoped lang="scss">
input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    /* 去掉input的默认样式 */
    background: transparent;
}
.btns {
    margin-top: 10%;
    width: 80%;
    height: 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > button {
        width: 80rem;
        height: 80%;
        background-color: rgb(35, 114, 233);
        border: none;
        border-radius: 5rem;
        color: #fff;
        justify-content: center;
        align-items: center;
    }
}
</style>
